<template>
  <div class="type-list">
    <Card class="warp-card">
      <!-------操作按钮行 begin------->
      <Row class="marginBottom10">
        <Button
            @click="queryList"
            icon="ios-search"
            type="primary"
            v-privilege="'base-type-query'"
            v-show="false"
            >Search</Button
          >
        <Button
          @click="showAddPeonyForm"
          icon="md-add"
          size="small"
          type="primary"
          v-privilege="'base-type-add'"
          >New</Button
        >
        <Button
        @click="deletTreeNode"
          class="marginLeft10"
          icon="ios-trash-outline"
          size="small"
          type="error"
          v-privilege="'base-type-delete'"
          >Delete</Button
        >
      </Row>
      <!-------操作按钮行 end------->
      <div class="tree-type">
        <div class="tre-header">
          <div>Category Name</div>
          <div class="header-right">
            <div class="time">Creation Time</div>
            <div class="people">User</div>
            <div class="btn">Action</div>
          </div>
        </div>
        <Tree
          :data="data2"
          show-checkbox
          ref="tree"
          title="categoryName"
          :render="renderContent"
          :expand="false"
        ></Tree>
      </div>
    </Card>
    <!-------表格列表 end------->

    <!-------添加、更新 Form表单 begin------->
    <Modal
      :footer-hide="true"
      :title="ModalTitle"
      v-if="data2.length"
      v-model="saveModal.show"
      @on-cancel="saveFormClose"
      width="500"
    >
      <PeonyListForm
        :isUpdate="saveModal.isUpdate"
        :updateData="saveModal.updateData"
        :parentList="data2"
        :proId="parentId"
        @on-form-close="saveFormClose"
      />
    </Modal>
    <!-------添加、更新 Form表单 end------->
  </div>
</template>

<script>
import { dateTimeRangeConvert } from "@/lib/util";
import { PAGE_SIZE_OPTIONS } from "@/constants/table-page";
import { labelApi } from "@/api/label";
import PeonyListForm from "./components/peony-list-form";
const PAGE_SIZE_INIT = 20;
export default {
  name: "PeonyList",
  components: {
    PeonyListForm,
  },
  props: {},
  data() {
    return {
      /* -------------------------添加、更新表单 ------------------------- */
      saveModal: {
        show: false,
        isUpdate: false,
        updateData: null,
      },
      /* -------------------------批量操作------------------------- */
      //批量刪除彈出框
      batchDeleteModal: {
        show: false,
      },
      //表格多选选中的元素数组
      mainTableSelectArray: [],
      /* -------------------------导出操作------------------------- */
      //批量导出loading按钮
      batchExportBtnLoading: false,
      //导出全部loading按钮
      allExportBtnLoading: false,
      /* -------------------------查询条件相关数据-------------------- */
      //搜索表单
      queryForm: {
        pageNum: 1,
        pageSize: PAGE_SIZE_INIT,
      },
      loading: false,
      data2: [],
      ModalTitle: 'New',
      parentId:0
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {},
  mounted() {
    this.queryList();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    /* -------------------------查询相关 begin------------------------- */
    convertQueryParam() {
      let createTimeArray = dateTimeRangeConvert(
        this.queryForm.createTimeRange
      );
      let updateTimeArray = dateTimeRangeConvert(
        this.queryForm.updateTimeRange
      );
      return {
        ...this.queryForm,
        createTimeBegin: createTimeArray[0],
        createTimeEnd: createTimeArray[1],
        updateTimeBegin: updateTimeArray[0],
        updateTimeEnd: updateTimeArray[1],
      };
    },
    //查询
    async queryList() {
      this.loading = true;
      try {
        let result = await labelApi.typeList();
        this.data2 = result.data;
      } finally {
        this.loading = false;
      }
    },
    //清空选中
    clearMainTableSelection() {
      this.mainTableSelectArray = [];
    },
    /*-------------------------添加，修改 表单 begin------------------------- */
    //显示添加表单
    showAddPeonyForm() {
      this.saveModal.isUpdate = false;
      this.saveModal.show = true;
      this.ModalTitle = '新增';
      this.parentId = '';
    },
    saveFormClose() {
      this.saveModal.show = false;
      this.queryList();
    },
    /*-------------------------添加，修改 表单 end------------------------- */
    renderContent(h, { root, node, data }) {
      return h(
        "div",
        {
          style: {
            display: "inline-block",
            width: "100%",
          },
        },
        [
          h("span", [
            h("Icon", {
              style: {
                marginRight: "8px",
              },
            }),
            h("span", data.title),
          ]),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
              },
            },
            [
              h(
                "span",
                {
                  style: {
                    marginRight: "50px",
                  },
                },
                "2021-06-09 11:00:00"
              ),
              h("span", {
                style: {
                  paddingRight: "10px",
                  display: 'inline-block',
                  width: '200px'
                },
              }, "admin"),
              h(
                "a",
                {
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.editType(data,data.id);
                    },
                  },
                },
                "Add Sub Category"
              ),
              h(
                "a",
                {
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.editType(data,'');
                    },
                  },
                },
                "Edit"
              ),
              h(
                "a",
                {
                  style: {
                    marginRight: "10px",
                    paddingRight: "40px",
                  },
                  on: {
                    click: () => {
                      this.deleteType(data);
                    },
                  },
                },
                "Delete"
              ),
            ]
          ),
        ]
      );
    },
    // 编辑
    editType(item,parentId) {
      if(parentId){
          this.ModalTitle = 'Add Sub Category';
          this.saveModal.isUpdate = false;
          this.parentId = parentId;
          this.saveModal.updateData = {};
      }else{
          this.ModalTitle = 'Update';
          this.saveModal.isUpdate = true;
          this.saveModal.updateData = item;
      }
      this.saveModal.show = true;
    },
    // 删除
    deleteType(item) {
      this.$Modal.confirm({
        title: 'Kindly Reminder',
        content: 'Are you sure to delet the selected items?',
        onOk: () => {
          this.deleteSure(item.id);
        },
        okText: 'Confirm',
        cancelText: 'Cancel'
      });
    },
    // 删除多个
    deletTreeNode(){
      let selectArr = this.$refs.tree.getCheckedNodes()
      if(selectArr.length == 0) {
        return this.$Message.error('请选择至少一条数据');
      }
      this.$Modal.confirm({
        title: 'Kindly Reminder',
        content: 'Are you sure to delet the selected items?',
        onOk: () => {
          this.deleteSure(params.row.id);
        },
        okText: 'Confirm',
        cancelText: 'Cancel'
      });
    },
    //删除确认
    async deleteSure(id){
        this.$Spin.show();
        let res = await labelApi.deleteType(id);
        this.$Message.success(res.msg);
        this.queryList();
        this.$Spin.hide();
    }
  },
};
</script>
<style lang="less" scoped>
@import "./type-list.less";
</style>